import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,SearchBar,Icon,Flex } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { DocumentTitle } from 'weaver-mobile-page';
import {getUrlParam} from '../../util/common'
const getLabel = Tools.getLabel;

@withRouter
@inject ('rememberStore')
@observer
class Remember extends React.Component {
    constructor(props){
        super(props);
    }

    static defaultProps = {
        prefixCls:"fna-remember"
    }

    componentDidMount() {
        const {rememberStore} = this.props;
        const {initData} = rememberStore;

        initData();
    }

    render() {
        const { rememberStore,prefixCls } = this.props;
        const { adRoute,costTypeList } = rememberStore;

        return (
            <div className={`${prefixCls}`}>
                <DocumentTitle data={[{ match: /^\/remember/i, title: () => getLabel(516431,'记一笔') }]} defaultTitle="" />
                <SearchBar
                    className="search-select"
                    placeholder="请输入费用类型名称"
                    showExtraButton={false}
                    onSubmit={(value)=>this.handleSubmit(value)}
                />

                    <div className={'multi-col-layouts'}>
                        <Flex className={`fna-flex-icon fna-flex-icon-03 fna-remeber-flex-icon`}>
                            {costTypeList.map( item => {
                                return (
                                    <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={item.itemStyle} onClick={()=>{this.routeTo(item.key)}}>
                                        <div className={`fna-flex-icon-item-icon ${item.icon}_div`} style={item.item_icon_style}>
                                            {(item.imageId == '-1' || item.imageId == '0') ? <Icon type={item.icon} /> 
                                            : <img src={`/weaver/weaver.file.FileDownload?fileid=${item.imageId}&cwid=fnaRemember`} width="22" height="18"/>}
                                        </div>
                                        <div className={`fna-flex-icon-item-text`} style={item.item_text_style}>{item.title}</div>
                                    </Flex.Item>
                            )})}  
                        </Flex>
                    </div>



               
                
            </div>
        )
    }


    //路由跳转
    routeTo=(type)=>{
        const {history,rememberStore,location:{search}} = this.props;
        const {invoiceCreatTakeOneNoteSet} = rememberStore;

        let urlParam = getUrlParam(search);

        if(urlParam.invoiceIds !== 'undefined' && urlParam.invoiceIds !== undefined){
            invoiceCreatTakeOneNoteSet({
                invoiceIds:urlParam.invoiceIds,
                id:type
            },(value)=>{
                history.push(`/rememberDetailPage?id=${type}&valueId=${value.valueId}`)
            })
        }else{
            history.push(`/rememberDetailPage?id=${type}`)
        }

        
    
    }

    //提交
    handleSubmit = (value) =>{
        const {rememberStore} = this.props;
        const {getTakeOneNoteType} = rememberStore;
        getTakeOneNoteType({nameQuery:value})
    }


    

}

export default Remember;